一套支援 ES6 / JSX 語法的程式碼檢測工具,具高度設定彈性與擴充性。能提前檢測出可疑的、具有潛在問題的程式碼,並顯示警告或錯誤訊息。
我們選擇將 ESLint 與 Webpack 結合,透過 eslint-loader 在 Webpack 打包 JS/JSX 之前執行 ESLint 檢查。
首先配置 Webpack 設定檔
module.export = {
module: {
rules: {
{
test: /\.(js|jsx)$/,
loader: 'eslint-loader',
enforce: 'pre',
exclude: /node_modules/,
options: {
// fix: true, // 是否讓 ESLint 直接 fix
},
}
}
}
}
在專案根目錄新增 ESLint 設定檔
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended"
],
"plugins": [],
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module",
"ecmaFeatures": { "jsx": true, "modules": true }
},
"parser": "babel-eslint",
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
}
}
為了確保團隊程式碼的品質以及風格的統一,我們導入了 ESLint 以及 Prettier。
ESLint
確保團隊程式碼質量
Prettier
確保團隊程式碼風格